<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
html{   
 width: 100%;   
 height: 100%;   
 overflow: hidden;   
 font-style: sans-serif;   
}   
body{   
 width: 100%;   
 height: 100%;   
 font-family: 'Open Sans',sans-serif;   
 margin-left: 0px;   
 background-color: #e1e1d0;   
}   
#login{   
 position: absolute;   
 top: 50%;   
 left:50%;   
 margin: -150px 0 0 -150px;   
 width: 300px;   
 height: 300px;   
}   
#login h1{   
 color: #fff;   
 text-shadow:0 0 10px;   
 letter-spacing: 1px;   
 text-align: center;   
}   
h1{   
 font-size: 2em;   
 margin: 0.67em 0;   
}   
input{   
 width: 278px;   
 height: 18px;   
 margin-bottom: 10px;   
 outline: none;   
 padding: 10px;   
 font-size: 13px;   
 color: #fff;   
 text-shadow:1px 1px 1px;   
 border-top: 1px solid #312E3D;   
 border-left: 1px solid #312E3D;   
 border-right: 1px solid #312E3D;   
 border-bottom: 1px solid #56536A;   
 border-radius: 4px;   
 background-color: #2D2D3F;   
}   
.but{   
 width: 300px;   
 min-height: 20px;   
 display: block;   
 background-color: #4a77d4;   
 border: 1px solid #3762bc;   
 color: #fff;   
 padding: 9px 14px;   
 font-size: 15px;   
 line-height: normal;   
 border-radius: 5px;   
 margin: 0;   
}
</style>
<script src="/js/myserverless-purejs.js"></script>
<title>ReactMRP1.0 Backend</title>
</head>
<body>
	<script> localStorage.setItem("develop_token","8888"); </script> 
	<div id="login">
	<h2>Login</h2>
	<h3 id="msg"></h3>
	<script> 
	 function domValById(id){return document.getElementById(id).value;}
	 
	 function cookieLogin(){ //cookie登录会在后端response的cookie里返回一个myToken，并且每次访问时myToken会自动加在前端cookie里发送。但是当前后端不在同一域时要解决跨域问题，配置很麻烦
		localStorage.setItem("myToken", ""); 
		var result =syncData$myServerless(`PublicBackend$CookieLogin`
		            , domValById("userId"), domValById("password"));
		if(result==true){
		   window.location.href="/welcome.html";
		} else
			document.getElementById("msg").innerHTML="Wrong userId or password.";
	 } 
		 
	 function tokenLogin(){ //这是另一种登录方式，myToken保存在localStorage里，每次访问时myToken会自动加在json里发送，没有跨域问题，但安全性没有cookie安全
  	    localStorage.setItem("myToken", ""); 
		var myToken =syncData$myServerless(`PublicBackend$TokenLogin`
					, domValById("userId"), domValById("password"));
		if(myToken){
			localStorage.setItem("myToken", myToken); 
			window.location.href="/welcome.html";
		} else
			document.getElementById("msg").innerHTML="Wrong userId or password.";
	 }
	</script>
	
	
	<form id="loginForm" name="loginForm" onsubmit="return false" action="##" method="post">
		  <input id="userId" type="text" required="required" placeholder="userId" name="userId" value="developer"></input> <br/>
		  <input id="password" type="password" required="required" placeholder="password" name="password" value="123"></input> <br/>
		  <button class="but" name="submit" onclick="cookieLogin()">Login (use cookie)</button> <br/>
		  <button class="but" name="submit" onclick="tokenLogin()">Login (use token)</button>
	</form>
	</div>
</body>
</html>


